<template>
  <view class="content">
    <view class="uni-list">
      <view class="uni-list-cell uni-list-cell-hover" v-for="(item, index) in news" :key="index" @click="openInfo" :data-newsid="item.post_id">
        <view class="uni-media-list">
          <image class="uni-media-list-logo" :src="item.author_avatar"></image>
          <view class="uni-media-list-body">
            <view class="uni-media-list-text">{{item.title}}</view>
            <view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      news: []
    };
  },
  onLoad: function() {
    uni.showLoading({
      title: "加载中..."
    });
    uni.request({
      url: 'https://unidemo.dcloud.net.cn/api/news',
      method: 'GET',
      data: {},
      success: res => {
        this.news = res.data;
        uni.hideLoading();
      },
      fail: () => {},
      complete: () => {}
    });
  },
  methods: {
    openInfo(e) {
      console.log(e);
      var newsid = e.currentTarget.dataset.newsid;
      uni.navigateTo({
        url: '../detail/detail?newsid=' + newsid
      });
    }
  }
};
</script>

 
<style>
    .content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} 
	.uni-media-list-body{
		height: auto;
	}
	.uni-media-list-text-top{
		line-height:1.6em;
	}
</style>

